<template>
    <div class="moveBox-root" style="" ref="moveBoxDom" @click="moveBox_ClickEvent">
        <slot></slot>
    </div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, ref } from 'vue';
import MoveboxShadow from './shadow.js'

const props = defineProps({
    posi: {
        type: [],
        default: [0, 0],
        require: false,
    },
    attr: {
        type: {},
        default: {
            zIndex: [999, 9999],//高亮图层,0:其他被点击时,1:直接被点击时
        },
        require: false,
    }
});
const curPosi = ref([0, 0]);
const attr = ref({
    zIndex: [999, 9999],
});
const shadow = MoveboxShadow.getInstance();


document.oncontextmenu = new Function("return false");

const emits = defineEmits(['rootmove']);

onMounted(() => {

    curPosi.value = props.posi;
    Object.assign(attr.value, attr.value, props.attr);

    document.body.addEventListener('mousemove', box_MousemoveEvent);
    document.body.addEventListener('mouseup', box_MouseupEvent);

    // 对下面的第一个div元素进行挂载事件
    const arr = moveBoxDom.value.childNodes;
    for (let i = 0; i < arr.length; i++) {
        if (arr[i] instanceof HTMLElement) {
            arr[i].addEventListener('mousedown', box_MousedownEvent);
            break;
        }
    }

    const dataSet = moveBoxDom.value.dataset;
    for (let item in props.attr) {
        dataSet[item] = props.attr[item];
    }
    move(curPosi.value[0], curPosi.value[1]);
});

onBeforeUnmount(() => {
    document.body.removeEventListener('mousemove', box_MousemoveEvent);
    document.body.removeEventListener('mouseup', box_MouseupEvent);
})


//#region 移动逻辑
let isMove = true;//是否允许移动的状态(外部)
let _isMove = ref(0);//正在移动的状态[0:静止状态,1:图标移动状态,2:非图标移动状态]
let offset = [];
const moveBoxDom = ref();
let posi = [0, 0];//当前移动准确位置
let posiIndex = [0, 0];//当前移动的吸附位置下标
let timeOut = null;
const box_MousedownEvent = (e) => {
    if (!isMove) return;
    if (e.button == 2) {
        offset[0] = e.offsetX;
        offset[1] = e.offsetY;

        const { width, height } = moveBoxDom.value.childNodes[1].getBoundingClientRect();
        if (width == 50 && height == 50) {
            _isMove.value = 2;
            shadow.getBoxPosiIndex(moveBoxDom.value);
        }
        else {
            _isMove.value = 1;
        }
    }
}

const box_MousemoveEvent = (e) => {
    const { clientX, clientY } = e;
    if (_isMove.value) {
        const l = clientX - offset[0];
        const t = clientY - offset[1];
        posi[0] = l;
        posi[1] = t;
        moveBoxDom.value.setAttribute('style', `top:${t}px;left:${l}px;z-index:99999;`);
        //吸附模式
        //根据当前的坐标来判断是哪一个位置
        if (_isMove.value == 2)
            posiIndex = shadow.getShadowPosi(l, t);
    }
}
const box_MouseupEvent = (e) => {
    const state = _isMove.value;
    if (state != 0) {
        const curPosi = [0, 0];
        if (state == 1) {
            curPosi[0] = posi[0];
            curPosi[1] = posi[1];
        } else if (state == 2) {
            curPosi[0] = posiIndex[0] * 60 + 10;
            curPosi[1] = posiIndex[1] * 60 + 10;
        }
        _isMove.value = 0;
        shadow.clear();
        move(curPosi[0], curPosi[1]);
        emits('rootmove', { x: posi[0], y: posi[1] });
    }
}

const move = (x, y, duration = 0.3) => {
    const { zIndex } = attr.value;
    posi[0] = x;
    posi[1] = y;
    moveBoxDom.value.setAttribute('style', `top:${y}px;left:${x}px;transition-duration:${duration}s;z-index:${zIndex[1]};`);
    if (timeOut) clearTimeout(timeOut);
    timeOut = setTimeout(() => {
        moveBoxDom.value.setAttribute('style', `top:${y}px;left:${x}px;z-index:${zIndex[0]};`);
    }, duration * 1000);
}
//#endregion

const isMoveA = (move) => {
    isMove = move;
}

defineExpose({
    move, isMoveA,
})

</script>

<style scoped lang="scss">
.moveBox-root {
    position: fixed;
    z-index: 999;

    .icon {
        pointer-events: none;
    }
}
</style>
